<template>
  <el-dialog :title="!dataForm.id ? '新建公司' : '修改公司'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
      <el-form-item label="公司全称" prop="companyName">
        <el-input v-model="dataForm.companyName" placeholder="输入公司名称" maxlength="40"></el-input>
      </el-form-item>
      <el-form-item label="公司简称" prop="companyShortName">
        <el-input v-model="dataForm.companyShortName" placeholder="输入公司简称" maxlength="40"></el-input>
      </el-form-item>
      <el-form-item label="公司区域" prop="companyAreaName">
        <el-popover
          ref="areaTree"
          v-model="areaTreeVisible"
          placement="bottom-start"
          trigger="click">
          <el-tree
            :data="areaTree"
            :props="areaTreeProps"
            node-key="id"
            ref="goodsCatsTree"
            @current-change="areaTreeCurrentChangeHandle"
            :default-expand-all="false"
            :default-expanded-keys="[0]"
            :highlight-current="true"
            :expand-on-click-node="false">
          </el-tree>
        </el-popover>
        <el-input v-model="dataForm.companyAreaName"
          class="area-tree"
          v-popover:areaTree
          :readonly="true"
          placeholder="请选择"
          @click="addOrUpdateVisible = true"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司详细地址" prop="companyAddress">
        <el-input v-model="dataForm.companyAddress" placeholder="输入详细地址" maxlength="80"></el-input>
      </el-form-item>
      <el-form-item label="管理员" prop="managerName">
        <el-input v-model="dataForm.managerName" placeholder="管理员真实姓名" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="管理员电话" prop="managerMobile">
        <el-input v-model="dataForm.managerMobile" placeholder="输入管理员电话" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="登录用户名" prop="username">
        <el-input v-model="dataForm.username" :disabled="dataForm.id !== null" placeholder="3-15位的字母,数字,下划线组合" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password" v-if="dataForm.id == null">
        <el-input v-model="dataForm.password" placeholder="6-15位的字母,数字,下划线组合" type="password" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" v-if="dataForm.id != null">
        <el-input v-model="dataForm.password" placeholder="填入则修改密码" type="password" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" v-if="dataForm.id == null">
        <el-input v-model="dataForm.confirmPassword" type="password" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" v-if="dataForm.id != null">
        <el-input v-model="dataForm.confirmPassword" type="password" maxlength="15"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :disabled="disabled" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      areaTree: {
        type: Array,
        default: function(){
          return []
        }
      }
    },
    data() {
      return {
        visible: false,
        areaTreeVisible: false,
        disabled: false,
        dataForm: {
          id: null,
          companyName: '',
          companyShortName: '',
          companyAreaCode: null,
          companyAreaName: '',
          companyAddress: '',
          managerName: '',
          managerMobile: '',
          username: '',
          password: '',
          confirmPassword: ''
        },
        areaTreeProps: {
          label: 'name',
          children: 'children'
        },
        dataRule: {
          companyName: [{
            required: true,
            message: '公司全称不能为空',
            trigger: 'blur'
          }],
          companyShortName: [{
            required: true,
            message: '公司简称不能为空',
            trigger: 'blur'
          }],
          companyAreaName: [{
            required: true,
            message: '请选择公司区域',
            trigger: 'blur'
          }],
          companyAddress: [{
            required: true,
            message: '请填写公司详细地址',
            trigger: 'blur'
          }],
          managerName: [{
            required: true,
            message: '管理员姓名不能为空',
            trigger: 'blur'
          }],
          managerMobile: [{
            required: true,
            message: '管理员电话不能为空',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '登录用户名不能为空',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '登录密码不能为空',
            trigger: 'blur'
          }],
          confirmPassword: [{
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur'
          }]
        }
      };
    },
    methods: {
      init(id) {
        this.dataForm = {
          id: id || null,
          companyName: '',
          companyShortName: '',
          companyAreaCode: null,
          companyAreaName: '',
          companyAddress: '',
          managerName: '',
          managerMobile: '',
          username: '',
          password: '',
          confirmPassword: '',
        }
        // this.visible = true;
        this.$nextTick(() => {
          if (this.dataForm.id) {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$http({
              url: this.$http.adornUrl(`/merchant/company/detail/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({
              data
            }) => {
              loading.close()
              if (data && data.code === 0) {
                this.dataForm.companyName = data.item.companyName
                this.dataForm.companyShortName = data.item.companyShortName
                this.dataForm.companyAreaCode = data.item.companyAreaCode
                this.dataForm.companyAreaName = data.item.companyAreaName
                this.dataForm.companyAddress = data.item.companyAddress
                this.dataForm.managerName = data.item.managerName
                this.dataForm.managerMobile = data.item.managerMobile
                this.dataForm.username = data.item.username
                this.dataForm.password = ''
                this.dataForm.confirmPassword = ''
              }
               this.visible = true
            }).catch(()=> {
              loading.close()
            });
          } else {
             this.visible = true
          }
        });
      },
      // 区域树选中
      areaTreeCurrentChangeHandle(data, node){
        if(data.id == 0){
          this.$message.error('请选择省市区')
          return
        }
        this.dataForm.companyAreaCode = data.areaAllId
        this.dataForm.companyAreaName = data.areaAllName
        this.areaTreeVisible = false
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.disabled = true;
            this.$http({
              url: this.$http.adornUrl(`/merchant/company/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                id: this.dataForm.id || undefined,
                companyName: this.dataForm.companyName,
                companyShortName: this.dataForm.companyShortName,
                companyAreaCode: this.dataForm.companyAreaCode,
                companyAreaName: this.dataForm.companyAreaName,
                companyAddress: this.dataForm.companyAddress,
                managerName: this.dataForm.managerName,
                managerMobile: this.dataForm.managerMobile,
                username: this.dataForm.username,
                password: this.dataForm.password,
                confirmPassword: this.dataForm.confirmPassword
              })
            }).then(({
              data
            }) => {
              this.disabled = false;
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit('refreshDataList');
                  }
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        });
      }
    }
  };
</script>
